<template>
    <div class="flex switch-container fs-12">
        <div v-for="(i, index) in list" class="switch-item pointer" :class="{ 'active': activeVal === i.value }" :key="index" @click="handleItemClick(i)">
            {{ i.name }}
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
    active: {
        type: [String, Number, Boolean]
    },
    list: {
        type: Array
    }
})

const emits = defineEmits(['update:active', 'change'])

const handleItemClick = (item) => {
    activeVal.value = item.value
    emits('update:active', activeVal.value)
    emits('change', activeVal.value)
    console.log('switchChange', item)
}

const activeVal = ref('')
watch(() => props.active, (newval) => {
    activeVal.value = newval
}, {
    immediate: true
})

</script>
<style lang="scss" scoped>
.switch-container {
    background: #F4F4F7;
    border-radius: 4px;
    padding: 2px;
}

.switch-item {
    border-radius: 2px;
    background: #F4F4F7;
    padding: 4px 8px;
    color: #BAC0CF;
}

.active {
    background: #fff;
    color: #202536;
}
</style>